<!--
//
// GChooseFile.vue
// rzhwweb
//
// Created by 区区电脑 on 2024/01/11.
//
-->
<template>
    <div class="GChooseFile">
        <div class="file-placeholder" ref="dropPlaceholder" @click="choose">
            <b-icon name="bi-cloud-arrow-up" size="50"/>
            <span v-if="state.file && state.file.name" class="message">{{ state.file.name }}</span>
            <span v-else class="message">点击或拖拽选择文件</span>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({});
const emits = defineEmits(["change"]);

// 路由
const router = useRouter();
// store
const store = useStore();

const state = reactive({
    file: {}
})

function choose() {
    $chooseFile({
        count: 1,
        success(files) {

            update(files)
        }
    })
}

function update(files) {
    state.file = files[0]
    emits("change", files[0])
    console.log("files:", files)
}


const dropPlaceholder = ref()

onMounted(() => {
    // 初始化数据
    dropPlaceholder.value.addEventListener("drop", e => {
        e.preventDefault(); //禁止浏览器默认行为，浏览器默认会直接打开显示
        if (e.type === 'drop') {
            //获取文件信息，同File对象相同
            const files = e.dataTransfer.files;
            update(files)
        }
    })
    dropPlaceholder.value.addEventListener('dragenter', e => {
        //禁止浏览器默认行为，浏览器默认会直接打开显示
        e.preventDefault();
    })
    dropPlaceholder.value.addEventListener('dragover', e => {
        //禁止浏览器默认行为，浏览器默认会直接打开显示
        e.preventDefault();
    })
})
</script>

<style scoped lang="scss">
.GChooseFile {
    width: 100%;
    .file-placeholder {
        width: 100%;
        height: 200px;
        border: 1px dashed #c7c7c7;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #999;
        .message {
            font-size: 20px;
            color: var(--el-color-primary);
        }

        &:hover {
            border: 1px dashed var(--el-color-primary);
        }
        &:active {
            border: 1px dashed var(--el-color-primary);
            opacity: 0.7;
        }
    }
}
</style>
